<template>
    <div class="app">
        <p>点赞次数：{{ count }}</p>
        <!-- <h3>双倍点赞：{{ double }}</h3> -->
        <button @click="increment">👍 + 1</button>

        <!-- 第二个功能 -->
        <!-- <div>
            <input type="text" @keypress.enter="handleEnter" v-model="msg" />
        </div>
        <ul>
            <li v-for="(item, index) in todos" :key="index">
                <span>{{ item.msg }}</span>
                <button @click="handleRemove(index)">x</button>
            </li>
        </ul> -->

        <!-- 第三个功能 -->
        <!-- <HelloWorld :msg="msg" /> -->
    </div>
</template>

<script>
import { computed, reactive, ref, toRef, toRefs, watch } from 'vue';

import HelloWorld from './components/HelloWorld.vue';

import useTodos from './hooks/useTodos';
import useCount from './hooks/useCount';

export default {
    name: 'App',
    components: {
        HelloWorld,
    },
    // beforeCreate() {
    //     console.log('beforeCreate');
    // },
    // created() {
    //     console.log('created');
    // },
    // beforeMount() {
    //     console.log('beforeMount');
    // },
    // mounted() {
    //     console.log('mounted');
    // },
    setup() {
        // console.log('执行了 setup 函数');
        // 原始数据类型：string、number、boolean、null、undefined、Symbol
        // const { count, double, increment } = useCount();

        // 引用类型：object、function、array
        // const { todos, msg, handleEnter, handleRemove } = useTodos();

        const count = ref(0);

        const increment = () => {
            count.value++;
        };

        // 组件状态
        // const state = reactive({
        //     count: 0,
        //     double: computed(() => state.count * 2),
        //     increment: () => {
        //         state.count++;
        //     },
        // });

        // 为什么 ref 的值要使用 value
        const data = {
            value: 0,
        };

        const state = reactive({
            count: 0,
        });

        state.count;

        // watch
        // watch([() => state.count, todos], (newVal, oldVal) => {
        //     console.log(newVal, oldVal);
        // });

        // 导出页面使用
        return {
            count,
            // double,
            increment,
            // state,
            // ...toRefs(state),
            // todos,
            // msg,
            // handleEnter,
            // handleRemove,
        };
    },
    // data() {
    //     return {
    //         count: 0,
    //         todos: [],
    //         msg: '',
    //     };
    // },
    // methods: {
    //     increment() {
    //         this.count++;
    //     },
    //     handleEnter() {
    //         this.todos.push({ msg: this.msg });
    //     },
    //     handleRemove(index) {
    //         this.todos.splice(index, 1);
    //     },
    // },
    // computed: {
    //     double() {
    //         return this.count * 2;
    //     },
    // },
    // watch: {
    //     count(newValue, oldValue) {
    //         console.log(newValue, oldValue);
    //     },
    // },
    // mixins:{
    //     amixin
    // }
};
</script>
